
<template>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">
            <Location />
        </el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">一级列表</a></el-breadcrumb-item>
        <el-breadcrumb-item>快捷菜单</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="formInline.name" placeholder="请输入搜索名称" />
        </el-form-item>
        <el-form-item>
            <el-select v-model="formInline.state" placeholder="待开始">
                <el-option label="待开始" value="待开始" />
                <el-option label="正在跟进" value="正在跟进" />
                <el-option label="已结束" value="已结束" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="middle" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>
    <el-dialog v-model="dialogFormVisible" title="添加">
        <el-form :model="form">
            <el-form-item label="客户名称">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="客户状态">
                <el-select v-model="form.state" placeholder="待开始">
                    <el-option label="待开始" value="待开始" />
                    <el-option label="正在跟进" value="正在跟进" />
                    <el-option label="已结束" value="已结束" />
                </el-select>
            </el-form-item>
            <el-form-item label="客户星级">
                <el-input v-model="form.star" autocomplete="off" />
            </el-form-item>
            <el-form-item label="最后跟进" required>
                <el-col :span="11">
                    <el-form-item prop="form.lastlink">
                        <el-date-picker v-model="form.lastlink" type="date" label="Pick a date" placeholder="Pick a date"
                            style="width: 100%" />
                    </el-form-item>
                </el-col>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="add(form)">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
    <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border stripe default-expand-all
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="Date" sortable />
        <el-table-column prop="state" label="Name" sortable />
        <el-table-column prop="star" label="Address" sortable />
        <el-table-column prop="linkman" label="Address" sortable />
        <el-table-column prop="phone" label="Address" sortable />
        <el-table-column prop="lastlink" label="Address" sortable />
        <el-table-column prop="days" label="Address" sortable />
        <el-table-column label="Date" width="120">
            <template #default="scope">
                <span @click="upd((scope as any).row)">编辑</span>
                <el-dialog v-model="centerDialogVisible" title="编辑" width="30%" center>
                    <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm" status-icon>
                        <el-form-item label="客户名称" prop="ruleForm.name">
                            <el-input v-model="ruleForm.name" />
                        </el-form-item>
                        <el-form-item label="客户状态" prop="ruleForm.state">
                            <el-select v-model="ruleForm.state" placeholder="Activity zone">
                                <el-option label="待开始" value="待开始" />
                                <el-option label="正在跟进" value="正在跟进" />
                                <el-option label="已结束" value="已结束" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="客户星级" prop="ruleForm.star">
                            <el-input v-model="ruleForm.star" />
                        </el-form-item>
                        <el-form-item label="最后跟进" required>
                            <el-col :span="11">
                                <el-form-item prop="ruleForm.lastlink">
                                    <el-date-picker v-model="form.lastlink" type="date" label="Pick a date"
                                        placeholder="Pick a date" style="width: 100%" />
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm(ruleFormRef)">
                                确认
                            </el-button>
                            <el-button @click="centerDialogVisible = false">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
                <span @click="del((scope as any).row.id)">删除</span>
                <span>置顶</span>
            </template>
        </el-table-column>
        <div style="margin-top: 20px">
        </div>
    </el-table>
    <el-button @click="toggleSelection(tableData)">全选</el-button>
    <el-button @click="toggleSelection()">反选</el-button>
    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="formInline.currentPage4" v-model:page-size="formInline.pageSize4"
            :page-sizes="[5, 6, 7]" layout="total, sizes, prev, pager, next, jumper" :total="formInline.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElTable } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { getAll, getDel, getAdd, getUpd } from '../api/index';
interface User {
    date: string
    name: string
    address: string
}
let dialogFormVisible = ref(false)
let centerDialogVisible = ref(false)
onMounted(() => {
    getData(formInline)
})
let getData = async (obj: any) => {
    let { data, total }: any = await getAll(obj)
    tableData.value = data
    formInline.total = total
}
const form = reactive({
    name: '',
    state: '',
    star: '',
    lastlink: '',
})
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    id: '',
    name: '',
    state: '',
    star: '',
    lastlink: '',
})
let formInline = reactive({
    currentPage4: 1,
    pageSize4: 5,
    total: 20,
    name: '',
    state: ''
})
const handleSizeChange = async (val: number) => {
    formInline.pageSize4 = val;
    let res: any = await getData(formInline)
    formInline.total = res.total
}
const handleCurrentChange = async (val: number) => {
    formInline.currentPage4 = val;
    let res: any = await getData(formInline)
    formInline.total = res.total
}
// 搜索
const onSubmit = () => {
    getData(formInline)
}
// 删
let del = async (id: any) => {
    await getDel({ id })
    getData(formInline)
}
// 增加
let add = async (form: any) => {
    dialogFormVisible.value = false
    await getAdd(form)
    getData(formInline)
}
let upd = async (obj: any) => {
    centerDialogVisible.value = true
    ruleForm.id = obj.id
    ruleForm.name = obj.name
    ruleForm.state = obj.state
    ruleForm.star = obj.star
    ruleForm.lastlink = obj.lastlink
}
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            centerDialogVisible.value = false
            getUpd(ruleForm)
            getData(formInline)
        } else {
            console.log('error submit!', fields)
        }
    })
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const toggleSelection = (rows?: User[]) => {
    if (rows) {
        rows.forEach((row) => {
            // TODO: improvement typing when refactor table
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-expect-error
            multipleTableRef.value!.toggleRowSelection(row, undefined)
        })
    } else {
        multipleTableRef.value!.clearSelection()
    }
}
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}
let tableData = ref()
</script>

<style lang="scss">
</style>
